

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Layout from '../../components/Layout';

interface SecurityStatus {
  phone: 'bound' | 'unbound';
  email: 'bound' | 'unbound';
  wechat: 'bound' | 'unbound';
}

const AccountSecurityPage: React.FC = () => {
  // 页面标题设置
  useEffect(() => {
    const originalTitle = document.title;
    document.title = '账户安全 - 学途';
    return () => { document.title = originalTitle; };
  }, []);

  // 安全状态管理
  const [securityStatus, setSecurityStatus] = useState<SecurityStatus>({
    phone: 'bound',
    email: 'bound',
    wechat: 'unbound'
  });

  // 模态框显示状态
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [showPhoneModal, setShowPhoneModal] = useState(false);
  const [showEmailModal, setShowEmailModal] = useState(false);
  const [showWechatModal, setShowWechatModal] = useState(false);

  // 表单数据
  const [passwordForm, setPasswordForm] = useState({
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  });

  const [phoneForm, setPhoneForm] = useState({
    newPhone: '',
    phoneCode: ''
  });

  const [emailForm, setEmailForm] = useState({
    newEmail: '',
    emailCode: ''
  });

  // 验证码倒计时
  const [phoneCodeCountdown, setPhoneCodeCountdown] = useState(0);
  const [emailCodeCountdown, setEmailCodeCountdown] = useState(0);

  // 倒计时效果
  useEffect(() => {
    let timer: number;
    if (phoneCodeCountdown > 0) {
      timer = window.setTimeout(() => {
        setPhoneCodeCountdown(phoneCodeCountdown - 1);
      }, 1000);
    }
    return () => {
      if (timer) clearTimeout(timer);
    };
  }, [phoneCodeCountdown]);

  useEffect(() => {
    let timer: number;
    if (emailCodeCountdown > 0) {
      timer = window.setTimeout(() => {
        setEmailCodeCountdown(emailCodeCountdown - 1);
      }, 1000);
    }
    return () => {
      if (timer) clearTimeout(timer);
    };
  }, [emailCodeCountdown]);

  // 密码修改处理
  const handlePasswordSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      alert('两次输入的新密码不一致');
      return;
    }

    if (passwordForm.newPassword.length < 6) {
      alert('密码长度不能少于6位');
      return;
    }

    // 模拟修改密码成功
    alert('密码修改成功');
    setShowPasswordModal(false);
    setPasswordForm({
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    });
  };

  // 手机号管理处理
  const handlePhoneUnbind = () => {
    setSecurityStatus(prev => ({ ...prev, phone: 'unbound' }));
    setShowPhoneModal(false);
    alert('手机号解绑成功');
  };

  const handlePhoneBind = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!phoneForm.newPhone || !phoneForm.phoneCode) {
      alert('请填写完整信息');
      return;
    }

    setSecurityStatus(prev => ({ ...prev, phone: 'bound' }));
    setShowPhoneModal(false);
    setPhoneForm({
      newPhone: '',
      phoneCode: ''
    });
    alert('手机号绑定成功');
  };

  const handleSendPhoneCode = () => {
    if (!phoneForm.newPhone) {
      alert('请先输入手机号');
      return;
    }

    setPhoneCodeCountdown(60);
    alert('验证码已发送');
  };

  // 邮箱管理处理
  const handleEmailUnbind = () => {
    setSecurityStatus(prev => ({ ...prev, email: 'unbound' }));
    setShowEmailModal(false);
    alert('邮箱解绑成功');
  };

  const handleEmailBind = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!emailForm.newEmail || !emailForm.emailCode) {
      alert('请填写完整信息');
      return;
    }

    setSecurityStatus(prev => ({ ...prev, email: 'bound' }));
    setShowEmailModal(false);
    setEmailForm({
      newEmail: '',
      emailCode: ''
    });
    alert('邮箱绑定成功');
  };

  const handleSendEmailCode = () => {
    if (!emailForm.newEmail) {
      alert('请先输入邮箱地址');
      return;
    }

    setEmailCodeCountdown(60);
    alert('验证码已发送');
  };

  // 企业微信管理处理
  const handleWechatUnbind = () => {
    setSecurityStatus(prev => ({ ...prev, wechat: 'unbound' }));
    setShowWechatModal(false);
    alert('企业微信解绑成功');
  };

  const handleWechatBind = () => {
    setSecurityStatus(prev => ({ ...prev, wechat: 'bound' }));
    setShowWechatModal(false);
    alert('企业微信绑定成功');
  };

  // 模态框背景点击关闭
  const handleModalBackdropClick = (e: React.MouseEvent, closeModal: () => void) => {
    if (e.target === e.currentTarget) {
      closeModal();
    }
  };

  return (
    <Layout title="账户安全 - 学途">
      <div className="flex min-h-screen bg-gray-50">
        {/* 左侧菜单 */}
        <aside className="w-64 bg-white border-r border-gray-200 min-h-screen">
          <nav className="p-4">
            {/* 个人中心菜单 */}
            <div>
              <Link to="/personal-center" className="flex items-center space-x-3 px-4 py-3 mb-4 text-gray-600 hover:bg-gray-50 hover:text-blue-600 rounded-lg transition-colors">
                <i className="fas fa-user text-lg"></i>
                <span className="font-medium">个人中心</span>
              </Link>
              <ul className="space-y-1">
                <li>
                  <Link to="/personal-info" className="flex items-center space-x-3 px-4 py-2 text-gray-600 hover:bg-gray-50 hover:text-blue-600 rounded-lg text-sm transition-colors">
                    <i className="fas fa-user-edit text-base"></i>
                    <span>个人信息</span>
                  </Link>
                </li>
                <li>
                  <Link to="/enrolled-courses" className="flex items-center space-x-3 px-4 py-2 text-gray-600 hover:bg-gray-50 hover:text-blue-600 rounded-lg text-sm transition-colors">
                    <i className="fas fa-book-open text-base"></i>
                    <span>已报名课程</span>
                  </Link>
                </li>
                <li>
                  <Link to="/messages" className="flex items-center space-x-3 px-4 py-2 text-gray-600 hover:bg-gray-50 hover:text-blue-600 rounded-lg text-sm transition-colors">
                    <i className="fas fa-envelope text-base"></i>
                    <span>站内信</span>
                  </Link>
                </li>
                <li>
                  <Link to="/account-security" className="flex items-center space-x-3 px-4 py-2 bg-blue-50 text-blue-600 rounded-lg text-sm transition-colors">
                    <i className="fas fa-shield-alt text-base"></i>
                    <span>账户安全</span>
                  </Link>
                </li>
              </ul>
            </div>
          </nav>
        </aside>

        {/* 主内容区域 */}
        <main className="flex-1 min-w-0">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            {/* 页面头部 */}
            <div className="mb-8">
              <nav className="text-sm text-gray-600 mb-4">
                <Link to="/home" className="hover:text-blue-600">首页</Link>
                <span className="mx-2">/</span>
                <Link to="/personal-center" className="hover:text-blue-600">个人中心</Link>
                <span className="mx-2">/</span>
                <span className="text-gray-900">账户安全</span>
              </nav>
              <h1 className="text-3xl font-bold text-gray-900">账户安全</h1>
              <p className="text-gray-600 mt-2">管理您的账户安全设置，保护账户安全</p>
            </div>

            {/* 安全设置项 */}
            <div className="space-y-6">
              {/* 修改密码 */}
              <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                      <i className="fas fa-key text-blue-600 text-xl"></i>
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">登录密码</h3>
                      <p className="text-gray-600 text-sm">定期修改密码，确保账户安全</p>
                    </div>
                  </div>
                  <button 
                    onClick={() => setShowPasswordModal(true)}
                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                  >
                    修改密码
                  </button>
                </div>
              </div>

              {/* 手机号绑定 */}
              <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                      <i className="fas fa-mobile-alt text-green-600 text-xl"></i>
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">手机号</h3>
                      <p className="text-gray-600 text-sm">
                        {securityStatus.phone === 'bound' ? '138****8888' : '未绑定'}
                      </p>
                      <span className={`inline-block px-2 py-1 text-xs rounded-full ${
                        securityStatus.phone === 'bound' 
                          ? 'bg-green-100 text-green-800' 
                          : 'bg-red-100 text-red-800'
                      }`}>
                        {securityStatus.phone === 'bound' ? '已绑定' : '未绑定'}
                      </span>
                    </div>
                  </div>
                  <button 
                    onClick={() => setShowPhoneModal(true)}
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      securityStatus.phone === 'bound' 
                        ? 'border border-gray-300 text-gray-600 hover:bg-gray-50'
                        : 'bg-blue-600 text-white hover:bg-blue-700'
                    }`}
                  >
                    {securityStatus.phone === 'bound' ? '解绑' : '绑定'}
                  </button>
                </div>
              </div>

              {/* 邮箱绑定 */}
              <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                      <i className="fas fa-envelope text-purple-600 text-xl"></i>
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">邮箱</h3>
                      <p className="text-gray-600 text-sm">
                        {securityStatus.email === 'bound' ? 'zhang***@example.com' : '未绑定'}
                      </p>
                      <span className={`inline-block px-2 py-1 text-xs rounded-full ${
                        securityStatus.email === 'bound' 
                          ? 'bg-green-100 text-green-800' 
                          : 'bg-red-100 text-red-800'
                      }`}>
                        {securityStatus.email === 'bound' ? '已绑定' : '未绑定'}
                      </span>
                    </div>
                  </div>
                  <button 
                    onClick={() => setShowEmailModal(true)}
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      securityStatus.email === 'bound' 
                        ? 'border border-gray-300 text-gray-600 hover:bg-gray-50'
                        : 'bg-blue-600 text-white hover:bg-blue-700'
                    }`}
                  >
                    {securityStatus.email === 'bound' ? '解绑' : '绑定'}
                  </button>
                </div>
              </div>

              {/* 企业微信绑定 */}
              <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                      <i className="fab fa-weixin text-yellow-600 text-xl"></i>
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">企业微信</h3>
                      <p className="text-gray-600 text-sm">
                        {securityStatus.wechat === 'bound' ? '已绑定' : '未绑定'}
                      </p>
                      <span className={`inline-block px-2 py-1 text-xs rounded-full ${
                        securityStatus.wechat === 'bound' 
                          ? 'bg-green-100 text-green-800' 
                          : 'bg-red-100 text-red-800'
                      }`}>
                        {securityStatus.wechat === 'bound' ? '已绑定' : '未绑定'}
                      </span>
                    </div>
                  </div>
                  <button 
                    onClick={() => setShowWechatModal(true)}
                    className={`px-4 py-2 rounded-lg transition-colors ${
                      securityStatus.wechat === 'bound' 
                        ? 'border border-gray-300 text-gray-600 hover:bg-gray-50'
                        : 'bg-blue-600 text-white hover:bg-blue-700'
                    }`}
                  >
                    {securityStatus.wechat === 'bound' ? '解绑' : '绑定'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>

      {/* 修改密码模态弹窗 */}
      {showPasswordModal && (
        <div 
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
          onClick={(e) => handleModalBackdropClick(e, () => setShowPasswordModal(false))}
        >
          <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
            <div className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">修改密码</h3>
                <button 
                  onClick={() => setShowPasswordModal(false)}
                  className="text-gray-600 hover:text-gray-900"
                >
                  <i className="fas fa-times"></i>
                </button>
              </div>
              <form onSubmit={handlePasswordSubmit} className="space-y-4">
                <div>
                  <label htmlFor="current-password" className="block text-sm font-medium text-gray-900 mb-2">当前密码</label>
                  <input 
                    type="password" 
                    id="current-password"
                    value={passwordForm.currentPassword}
                    onChange={(e) => setPasswordForm(prev => ({ ...prev, currentPassword: e.target.value }))}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                    placeholder="请输入当前密码" 
                    required 
                  />
                </div>
                <div>
                  <label htmlFor="new-password" className="block text-sm font-medium text-gray-900 mb-2">新密码</label>
                  <input 
                    type="password" 
                    id="new-password"
                    value={passwordForm.newPassword}
                    onChange={(e) => setPasswordForm(prev => ({ ...prev, newPassword: e.target.value }))}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                    placeholder="请输入新密码" 
                    required 
                  />
                </div>
                <div>
                  <label htmlFor="confirm-password" className="block text-sm font-medium text-gray-900 mb-2">确认新密码</label>
                  <input 
                    type="password" 
                    id="confirm-password"
                    value={passwordForm.confirmPassword}
                    onChange={(e) => setPasswordForm(prev => ({ ...prev, confirmPassword: e.target.value }))}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                    placeholder="请再次输入新密码" 
                    required 
                  />
                </div>
                <div className="flex space-x-3 pt-4">
                  <button 
                    type="button"
                    onClick={() => setShowPasswordModal(false)}
                    className="flex-1 px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    取消
                  </button>
                  <button 
                    type="submit"
                    className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                  >
                    确认修改
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}

      {/* 手机号管理模态弹窗 */}
      {showPhoneModal && (
        <div 
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
          onClick={(e) => handleModalBackdropClick(e, () => setShowPhoneModal(false))}
        >
          <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
            <div className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">
                  {securityStatus.phone === 'bound' ? '解绑手机号' : '绑定手机号'}
                </h3>
                <button 
                  onClick={() => setShowPhoneModal(false)}
                  className="text-gray-600 hover:text-gray-900"
                >
                  <i className="fas fa-times"></i>
                </button>
              </div>
              
              {securityStatus.phone === 'bound' ? (
                <div className="space-y-4">
                  <p className="text-gray-600">解绑手机号后，您将无法通过手机号找回密码，确定要解绑吗？</p>
                  <div className="flex space-x-3 pt-4">
                    <button 
                      onClick={() => setShowPhoneModal(false)}
                      className="flex-1 px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors"
                    >
                      取消
                    </button>
                    <button 
                      onClick={handlePhoneUnbind}
                      className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
                    >
                      确认解绑
                    </button>
                  </div>
                </div>
              ) : (
                <div className="space-y-4">
                  <form onSubmit={handlePhoneBind} className="space-y-4">
                    <div>
                      <label htmlFor="new-phone" className="block text-sm font-medium text-gray-900 mb-2">新手机号</label>
                      <input 
                        type="tel" 
                        id="new-phone"
                        value={phoneForm.newPhone}
                        onChange={(e) => setPhoneForm(prev => ({ ...prev, newPhone: e.target.value }))}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                        placeholder="请输入手机号" 
                        required 
                      />
                    </div>
                    <div>
                      <label htmlFor="phone-code" className="block text-sm font-medium text-gray-900 mb-2">验证码</label>
                      <div className="flex space-x-2">
                        <input 
                          type="text" 
                          id="phone-code"
                          value={phoneForm.phoneCode}
                          onChange={(e) => setPhoneForm(prev => ({ ...prev, phoneCode: e.target.value }))}
                          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                          placeholder="请输入验证码" 
                          required 
                        />
                        <button 
                          type="button"
                          onClick={handleSendPhoneCode}
                          disabled={phoneCodeCountdown > 0}
                          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors whitespace-nowrap disabled:opacity-50"
                        >
                          {phoneCodeCountdown > 0 ? `${phoneCodeCountdown}秒后重发` : '发送验证码'}
                        </button>
                      </div>
                    </div>
                    <div className="flex space-x-3 pt-4">
                      <button 
                        type="button"
                        onClick={() => setShowPhoneModal(false)}
                        className="flex-1 px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors"
                      >
                        取消
                      </button>
                      <button 
                        type="submit"
                        className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                      >
                        确认绑定
                      </button>
                    </div>
                  </form>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* 邮箱管理模态弹窗 */}
      {showEmailModal && (
        <div 
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
          onClick={(e) => handleModalBackdropClick(e, () => setShowEmailModal(false))}
        >
          <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
            <div className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">
                  {securityStatus.email === 'bound' ? '解绑邮箱' : '绑定邮箱'}
                </h3>
                <button 
                  onClick={() => setShowEmailModal(false)}
                  className="text-gray-600 hover:text-gray-900"
                >
                  <i className="fas fa-times"></i>
                </button>
              </div>
              
              {securityStatus.email === 'bound' ? (
                <div className="space-y-4">
                  <p className="text-gray-600">解绑邮箱后，您将无法通过邮箱找回密码，确定要解绑吗？</p>
                  <div className="flex space-x-3 pt-4">
                    <button 
                      onClick={() => setShowEmailModal(false)}
                      className="flex-1 px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors"
                    >
                      取消
                    </button>
                    <button 
                      onClick={handleEmailUnbind}
                      className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
                    >
                      确认解绑
                    </button>
                  </div>
                </div>
              ) : (
                <div className="space-y-4">
                  <form onSubmit={handleEmailBind} className="space-y-4">
                    <div>
                      <label htmlFor="new-email" className="block text-sm font-medium text-gray-900 mb-2">新邮箱</label>
                      <input 
                        type="email" 
                        id="new-email"
                        value={emailForm.newEmail}
                        onChange={(e) => setEmailForm(prev => ({ ...prev, newEmail: e.target.value }))}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                        placeholder="请输入邮箱地址" 
                        required 
                      />
                    </div>
                    <div>
                      <label htmlFor="email-code" className="block text-sm font-medium text-gray-900 mb-2">验证码</label>
                      <div className="flex space-x-2">
                        <input 
                          type="text" 
                          id="email-code"
                          value={emailForm.emailCode}
                          onChange={(e) => setEmailForm(prev => ({ ...prev, emailCode: e.target.value }))}
                          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                          placeholder="请输入验证码" 
                          required 
                        />
                        <button 
                          type="button"
                          onClick={handleSendEmailCode}
                          disabled={emailCodeCountdown > 0}
                          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors whitespace-nowrap disabled:opacity-50"
                        >
                          {emailCodeCountdown > 0 ? `${emailCodeCountdown}秒后重发` : '发送验证码'}
                        </button>
                      </div>
                    </div>
                    <div className="flex space-x-3 pt-4">
                      <button 
                        type="button"
                        onClick={() => setShowEmailModal(false)}
                        className="flex-1 px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors"
                      >
                        取消
                      </button>
                      <button 
                        type="submit"
                        className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                      >
                        确认绑定
                      </button>
                    </div>
                  </form>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* 企业微信绑定模态弹窗 */}
      {showWechatModal && (
        <div 
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
          onClick={(e) => handleModalBackdropClick(e, () => setShowWechatModal(false))}
        >
          <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
            <div className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">
                  {securityStatus.wechat === 'bound' ? '解绑企业微信' : '绑定企业微信'}
                </h3>
                <button 
                  onClick={() => setShowWechatModal(false)}
                  className="text-gray-600 hover:text-gray-900"
                >
                  <i className="fas fa-times"></i>
                </button>
              </div>
              
              {securityStatus.wechat === 'bound' ? (
                <div className="space-y-4">
                  <p className="text-gray-600">解绑企业微信后，您将无法通过企业微信扫码登录，确定要解绑吗？</p>
                  <div className="flex space-x-3 pt-4">
                    <button 
                      onClick={() => setShowWechatModal(false)}
                      className="flex-1 px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors"
                    >
                      取消
                    </button>
                    <button 
                      onClick={handleWechatUnbind}
                      className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
                    >
                      确认解绑
                    </button>
                  </div>
                </div>
              ) : (
                <div className="space-y-4">
                  <div className="text-center">
                    <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                      <i className="fab fa-weixin text-4xl text-gray-400"></i>
                    </div>
                    <p className="text-gray-600 mb-4">请使用企业微信扫描下方二维码</p>
                    <div className="w-48 h-48 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                      <p className="text-gray-600 text-center">企业微信二维码</p>
                    </div>
                  </div>
                  <div className="flex space-x-3 pt-4">
                    <button 
                      onClick={() => setShowWechatModal(false)}
                      className="flex-1 px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors"
                    >
                      取消
                    </button>
                    <button 
                      onClick={handleWechatBind}
                      className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                    >
                      已扫描完成
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </Layout>
  );
};

export default AccountSecurityPage;

